import React, { useEffect, useState } from 'react'
import './style.css'
import { request } from '../../service/request'
import Card from '../../components/card'
import { useNavigate } from 'react-router-dom'
const Home = () => {
  const [list, setList] = useState([])
  const navigate = useNavigate()
  const getList = () => {
    request.get('/api/list').then(resp => {
      setList(resp.data.data)
    })
  }
  useEffect(() => {
    console.log(11111)
    getList()
  }, [])
  return <div className='list'>
    {
      list.map((v, i) => {
        return <Card key={i} v={v} onClick={() => navigate('/detail/' + v.id)}></Card>
      })
    }
  </div>
}




const Index = () => {
  const tabData = [{
    title: '推荐',
    element: <Home></Home>
  }, {
    title: '电影',
    element: <div>2</div>
  }, {
    title: '其他',
    element: <div>3</div>
  }, {
    title: '排榜',
    element: <div>4</div>
  }, {
    title: '热门',
    element: <div>5</div>
  }]
  const [activeIndex, setActiveIndex] = useState(0)
  return (
    <div>
      <div className="title">
        {
          tabData.map((v, i) => {
            return <span key={i} onClick={() => setActiveIndex(i)} className={i === activeIndex ? 'active' : ''}>{v.title}</span>
          })
        }
      </div>
      <div>
        { tabData[activeIndex].element }
      </div>
    </div>
  )
}
export default Index